<template>
  <el-container>
    <el-header>
      <div class="site-nav">
        当前位置:
        <router-link :to="{ name: 'Home' }">首页</router-link>
        >
        <span class="large_type">资料下载</span>
      </div>
    </el-header>

    <el-container>
      <el-main>
        <ul class="file-list">
          <li v-for="file in files" :key="file.id">
            <a :href="'/fileServer/' + file.filePath">{{ file.fileName }}</a>
            <!-- <router-link :to="{name:'files',params:{id:file.id}}">{{file.fileName}}</router-link> -->
            <span>{{ file.createTime }}</span>
          </li>
        </ul>
      </el-main>
    </el-container>
    <el-pagination
      v-if="filePageVo != null"
      background
      layout="prev, pager, next"
      v-model:current-page="currentPage"
      :total="filePageVo.total"
      @current-change="refreshPasagePage"
      :page-size="filePageVo.pageSize"
    ></el-pagination>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";

const OK = 200;
const route = useRoute();
const filePageVo = ref({});
const files = ref([]);
const currentPage = ref(1);
const fileDownPath = ref("");

const getFileList = async (typeId, pageNum, pageSize) => {
  try {
    const res = await axios.get("/api/files", {
      params: {
        fileTypeId: typeId,
        pageNum: pageNum,
        pageSize: pageSize,
      },
    });
    if (res.data.code === OK) {
      filePageVo.value = res.data.data;
      console.log(filePageVo.value);
      files.value = filePageVo.value.list;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error("获取文件列表失败:", error);
  }
};

const refreshPasagePage = () => {
  getFileList(3, currentPage.value, 8);
};

onMounted(() => {
  const typeId = route.query.typeId;
  getFileList(3, currentPage.value, 8);
});
</script>

<style scoped="scoped">
.site-nav {
  float: left;
  height: 70px;
  line-height: 70px;
  font-size: 20px;
}
.large_type {
  margin: 0 5px;
}
.file-title {
  display: block;
  width: 120px;
  margin: 0 auto;
  font-size: 24px;
  color: #9a0e14;
  margin-bottom: 15px;
}
.file-list li {
  height: 32px;
  line-height: 32px;
}

.file-list li > a {
  display: inline-block;
  width: 270px;
  height: 32px;
  line-height: 32px;
  float: left;
  margin-left: 150px;
  text-align: left;

  -webkit-line-clamp: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.file-list li > span {
  height: 32px;
  line-height: 32px;
  color: #111;
  font-size: 16px;
}
</style>
